<template>
	<view>
		<view style="position: fixed;top: 0;z-index: 8;width: 100%; background: #FFFFFF;">
			<view class="row-css" style="justify-content: center;">
				<view class="column-css" style="margin-left: 150rpx;align-items: center;">
					<view style="font-size: 70rpx;margin: 20rpx;color: #F0AD4E;">{{ gradeTotal }}</view>
					<view style="font-weight: bold;">积分收支明细</view>
				</view>
				<view class="row-css redemption-view" @click="onRedemption()">积分换购</view>
			</view>
			<view class="scores-line"></view>
			<view class="row-css" style="justify-content: space-between;margin: 20rpx 30rpx;">
				<view :class="tabintegral == 2 ? 'tabisv' : 'tabisn'" @click="onintegral(2)">全部</view>
				<view :class="tabintegral == 1 ? 'tabisv' : 'tabisn'" @click="onintegral(1)">已获取</view>
				<view :class="tabintegral == 0 ? 'tabisv' : 'tabisn'" @click="onintegral(0)">已使用</view>
			</view>
			<view id="top" style="width: 100%;height: 1rpx;"></view>
		</view>
		<!-- <view style="position: fixed;height: 100%;width: 100%;" :style="{ top: topheight + 'px' }"> -->
		<mescroll-body ref="mescroll" :top="topheight" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="column-css">
				<block v-for="(item, index) in scorelist" :key="index">
					<view class="row-css" style="border-bottom: 1rpx solid #D9D9D9;margin-bottom: 10rpx;">
						<view class="column-css" style="width: 40%;padding-left: 10rpx;">
							<view>{{ item.remark }}</view>
							<view>{{ item.crtTime }}</view>
						</view>
						<view style="width: 35%;">{{ item.etpName }}</view>
						<view style="width: 20%;text-align: right;">{{ item.grade }}</view>
					</view>
				</block>
			</view>
		</mescroll-body>

		<uni-popup ref="popup" type="center">
			<view class="column-css" style="background: #FFFFFF;width: 620rpx;padding: 30rpx 15rpx;">
				<view class="row-css" style="margin-left: 10rpx;line-height: 50rpx;">
					<view style="margin-left: 10rpx;padding: 10rpx 20rpx;">当前企业：</view>
					<view style="margin-left: 10rpx;padding: 10rpx 20rpx;">{{ etpName }}</view>
				</view>
				<view class="row-css" style="margin-left: 10rpx;line-height: 50rpx;">
					<view style="margin-left: 10rpx;padding: 10rpx 20rpx;">可用积分：</view>
					<view style="margin-left: 110rpx;padding: 10rpx 20rpx;text-align: center;">{{ availableTotal }}</view>
				</view>
				<view class="row-css" style="margin-left: 10rpx;line-height: 50rpx;">
					<view style="margin-left: 10rpx;padding: 10rpx 20rpx;">本次使用：</view>
					<view style="margin-left: 10rpx;padding: 10rpx 20rpx;">
						<uni-number-box style="width: 200rpx;" :value="100" :min="100" :max="10000" :step="100" @change="bindChange"></uni-number-box>
					</view>
				</view>
				<view class="row-css">
					<view class="view-deltail" style="margin: 20rpx; background: #007aff;" @click="submit()">确定</view>
					<view class="view-deltail" style="margin: 20rpx; background: #d9d9d9;" @click="clean()">取消</view>
				</view>
			</view>
		</uni-popup>
		<!-- </view> -->
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import MescrollBody from '@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue';
export default {
	mixins: [MescrollMixin], // 使用mixin
	components: {
		MescrollBody
	},
	data() {
		return {
			tabintegral: 2,
			gradeTotal: 0,
			availableTotal: 0,
			etpId: '',
			etpName: '',
			grade: 100,
			scorelist: [],
			topheight: '0',
			page: 1,
			pageSize: 10,
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				}
			}
		};
	},
	methods: {
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调*/
		downCallback(mescroll) {
			mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
		},
		/*上拉加载的回调*/
		upCallback(mescroll) {
			this.page = mescroll.num; // 页码, 默认从1开始
			//联网加载数据
			this.onwaybill(mescroll);
		},
		onwaybill(mescroll) {
			let that = this;
			that.wxRequest({
				url: `${that.API}/driverService/gradeList`,
				method: 'POST',
				data: {
					page: that.page,
					pageSize: that.pageSize,
					driverId: uni.getStorageSync(that.DATA_KEY.userInfo).driverId,
					type: that.tabintegral
				},
				title: '加载中...',
				success: res => {
					that.gradeTotal = res.data.data.gradeTotal;
					let list = res.data.data.list;
					if (that.page == 1) {
						that.scorelist = [];
					}
					for (let i = 0; i < list.length; i++) {
						that.scorelist.push(list[i]);
					}
					console.log("ddddddddddd;;;;;;;;;;;;",that.scorelist);
					// that.scorelist = res.data.data.list;
					if (mescroll != null) {
						mescroll.endBySize(that.scorelist.length, res.data.data.total);
						setTimeout(() => {
							that.mescroll.endSuccess(that.scorelist.length);
						}, 20);
					}
				},
				complete: res => {
					//  请求失败,隐藏加载状态
					if (mescroll != null) {
						setTimeout(() => {
							that.mescroll.endSuccess();
						}, 20);
					}
				}
			});
		},
		onintegral(integral) {
			this.tabintegral = integral;
			this.page = 1;
			this.mescroll.resetUpScroll();
		},
		bindChange(e) {
			this.grade = e;
			console.log('d==================', e);
		},
		onRedemption() {
			this.$refs.popup.open('center');
		},
		submit() {
			if (this.grade <= this.availableTotal) {
				this.wxRequest({
					url: `${this.API}/driverService/gradeReduce`,
					method: 'POST',
					data: {
						driverId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId,
						etpId: this.etpId,
						grade: this.grade
					},
					title: '加载中...',
					success: res => {
						this.onwaybill();
						this.queryEtpGrade();
						this.$refs.popup.close();
					}
				});
			} else {
				uni.showToast({
					icon: 'none',	
			 title: '当前兑换积分大于可兑换积分'
				});
			}
		},
		clean() {
			this.$refs.popup.close();
		},
		queryEtpGrade() {
			this.wxRequest({
				url: `${this.API}/driverService/queryEtpGrade`,
				method: 'POST',
				data: {
					driverId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId,
					etpId: this.etpId
				},
				title: '加载中...',
				success: res => {
					this.availableTotal = res.data.data.gradeTotal;
				}
			});
		}
	},
	onLoad(options) {
		// this.userInfo = uni.getStorageSync(this.DATA_KEY.userInfo);
		// this.etpId = uni.getStorageSync(this.DATA_KEY.etpId);
		// this.etpName = uni.getStorageSync(this.DATA_KEY.etpName);
		this.etpId = uni.getStorageSync(this.DATA_KEY.etpId);
		this.etpName = uni.getStorageSync(this.DATA_KEY.etpName);
		this.onwaybill();
		this.queryEtpGrade();
	},
	onReady: function() {
		const query = uni.createSelectorQuery();
		query
			.select('#top')
			.boundingClientRect()
			.exec(data => {
				// subNvue.setStyle({"top": `${data[0].top}px`});
				// subNvue.show();
				this.topheight = data[0].top+'px';
				console.log('data: ' + JSON.stringify(data));
				console.log('data: ' + data[0].top);
			});
	}
};
</script>

<style>
page {
	background: #ffffff;
}
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}
.redemption-view {
	margin: 20rpx;
	margin-top: 80rpx;
	align-items: center;
	color: #e04b28;
}
.scores-line {
	height: 1rpx;
	width: 100%;
	background: #c8c7cc;
	margin: 10rpx 0;
}
.tabisv {
	padding: 10rpx 50rpx;
	background: #007aff;
	color: #ffffff;
	border-radius: 10rpx;
}
.tabisn {
	padding: 10rpx 50rpx;
	background: #d9d9d9;
	color: #999999;
	border-radius: 10rpx;
}
.view-deltail {
	width: 40%;
	text-align: center;
	background: #2b7cff;
	padding: 10rpx;
	color: #ffffff;
	border-radius: 10rpx;
}
</style>
